<!DOCTYPE>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<script src="js/jquery.js"></script>
	<script src="js/jsencrypt.js" type="text/javascript"></script>
	<script>
		$(() => {
			/*No cache for css*/
			$('link.cssLink').each((index, element) => {
				let url = $(element).attr('href');
				url += '?rand=' + Math.random();
				$(element).attr('href', url);
			});
			
			/*Auto completion function*/
			$('#searchInput').on('keydown', (e) => {
				let keyword = $(e.target).val();
				let requestData = 'keyword=' + keyword;
				console.log(requestData);
				$.ajax({
					url: 'Search',
					method: 'GET',
					accept: 'application/json',
					data: requestData,
					success: (productList, status) => {
						let dataList = $('#autoCompletion');
						/*Clear the origin datalist*/
						dataList.children().remove();
						productList.forEach((element, index) => {
							/*Max number of auto completion is 10
                            Although this should be done in server*/
							const MAX_NUMBER_OF_COMPLETION = 10;
							if (index < MAX_NUMBER_OF_COMPLETION) {
								dataList.append('<option class="autocomplete-option" value="' + element.name + '">' + element.name + '</option>');
							}
						});
						
					}
				});
			});
			
		});
	</script>
	<link class="cssLink" href="css/jpetstore.css" media="screen"
		  rel="StyleSheet" type="text/css"/>
	<link href="css/icono.min.css" rel="stylesheet" type="text/css">
	<link class="cssLink" href="css/mycss.css" rel="stylesheet" type="text/css">
	<meta content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org"
		  name="generator"/>
	<title>MyPetStore</title>
	<meta charset="UTF-8">
	<meta content="text/html; charset=UTF-8"
		  http-equiv="Content-Type"/>
	<meta content="max-age=0" http-equiv="Cache-Control"/>
	<meta content="no-cache" http-equiv="Cache-Control"/>
	<meta content="0" http-equiv="expires"/>
	<meta content="Tue, 01 Jan 1980 1:00:00 GMT" http-equiv="Expires"/>
	<meta content="no-cache" http-equiv="Pragma"/>
</head>
<body>
<div th:include="common/top.html::top"></div>
<div id="content">
	<div id="Catalog">
		
		
		<form action="ChangeAccountInformation" id="userInfoForm" method="POST">
			
			<h3>User Information</h3>
			
			<table>
				<tbody>
				<tr>
					<td>Email Address:</td>
					<td th:text="${session.loginUser.email}">Test@email.com</td>
				</tr>
				<tr>
					<td>Current Password:</td>
					<td><input name="currentPassword" type="password"></td>
				</tr>
				<tr>
					<td colspan="2" style="color: red" th:text="${updateMsg}">Update Success</td>
				</tr>
				<tr>
					<td>New password:</td>
					<td><input id="stripes--517137302" name="newPassword"
							   type="password">
						<!--
						<script type="text/javascript">
						setTimeout(
							function() {
								try {
									var z = document
										.getElementById('stripes--517137302');
									z.focus();
									z.select();
								} catch (e) {
								}
							}, 1);
					</script>
					-->
					</td>
				</tr>
				<tr>
					<td>Repeat password:</td>
					<td><input name="repeatedPassword" type="password"></td>
				</tr>
				</tbody>
			</table>
			<h3>Account Information</h3>
			
			<table>
				<tbody>
				<tr>
					<td>First name:</td>
					<td><input name="firstName" th:value="${session.loginUser.firstName}" type="text"></td>
				</tr>
				<tr>
					<td>Last name:</td>
					<td><input name="lastName" th:value="${session.loginUser.lastName}" type="text"></td>
				</tr>
				<tr>
					<td>Phone:</td>
					<td><input name="phone" th:value="${session.loginUser.phone}" type="text"></td>
				</tr>
				<tr>
					<td>Address :</td>
					<td><input name="address1" size="40" th:value="${session.loginUser.address1}" type="text"></td>
				</tr>
				<tr>
					<td>City:</td>
					<td><input name="city" th:value="${session.loginUser.city}" type="text"></td>
				</tr>
				<tr>
					<td>State:</td>
					<td><input name="state" size="4" th:value="${session.loginUser.state}"
							   type="text"></td>
				</tr>
				<tr>
					<td>Zip:</td>
					<td><input name="zip" size="10" th:value="${session.loginUser.zip}"
							   type="text"></td>
				</tr>
				<tr>
					<td>Country:</td>
					<td><input name="country" size="15" th:value="${session.loginUser.country}"
							   type="text"></td>
				</tr>
				</tbody>
			</table>
			
			<h3>Profile Information</h3>
			
			<table>
				<tbody>
				<tr>
					<td>Language Preference:</td>
					<td><select name="languagePreference">
						<option selected="selected"
								th:text="${session.loginUser.languagePreference}"
								th:value="${session.loginUser.languagePreference}">
							English
						</option>
						<option value="english">english</option>
						<option value="japanese">japanese</option>
					</select></td>
				</tr>
				<tr>
					<td>Favourite Category:</td>
					<td><select name="favouriteCategoryId">
						<option selected="selected"
								th:text="${session.loginUser.favouriteCategoryId}"
								th:value="${session.loginUser.favouriteCategoryId}">
							Fish
						</option>
						<option value="FISH">FISH</option>
						<option value="DOGS">DOGS</option>
						<option value="REPTILES">REPTILES</option>
						<option value="CATS">CATS</option>
						<option value="BIRDS">BIRDS</option>
					</select></td>
				</tr>
				<tr>
					<td>Enable MyList</td>
					<td><input checked="checked" name="listOption" th:if="${session.loginUser.listOption}"
							   type="checkbox">
						<input name="listOption" th:if="${not session.loginUser.listOption}" type="checkbox">
					</td>
				</tr>
				<tr>
					<td>Enable MyBanner</td>
					<td><input checked="checked"
							   name="bannerOption" th:if="${session.loginUser.listOption}" type="checkbox"/>
						<input name="bannerOption" th:if="${not session.loginUser.listOption}" type="checkbox">
					</td>
				</tr>
				
				</tbody>
			</table>
			
			
			<input name="editAccount" type="submit"
				   id="submitButton" value="Save Account Information">
		
		</form>
		<a href="OrderListPage">My Orders</a>
		<script>
			let encrypter = new JSEncrypt();
			$.ajax({
				url: 'key',
				success: function (e) {
					encrypter.setPublicKey(e);
				}
			});
			$('#submitButton').on('click', function (e) {
				e.preventDefault();
				console.log('trigger');
				let currentPasswordInput = $('input[name="currentPassword"]');
				currentPasswordInput.val(encrypter.encrypt(currentPasswordInput.val()));
				let newPasswordInput = $('input[name="newPassword"]');
				newPasswordInput.val(encrypter.encrypt(newPasswordInput.val()));
				let repeatedPasswordInput = $('input[name="repeatedPassword"]');
				repeatedPasswordInput.val(encrypter.encrypt(repeatedPasswordInput.val()));
				$('#userInfoForm').submit();
			});
		</script>
	</div>

</div>
<div th:include="common/bottom.html::bottom"></div>
</body>
</html>
	